<template>
  <el-dialog
    :title="showTitle"
    :visible="showDialog"
    @close="btnCancel"
    custom-class="dialog"
  >
    <el-form
      ref="AddformData"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input
          placeholder="请输入文章标签"
          v-model="formData.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleBody">
        <!-- 富文本编辑器 -->
        <quillEditor
          :options="editorOption"
          v-model="formData.articleBody"
        ></quillEditor>
      </el-form-item>
      <el-form-item label="视频地址" prop="videoURL">
        <el-input
          placeholder="请输入视频地址"
          v-model="formData.videoURL"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="end">
      <el-col :span="6">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { add, update, detail } from '@/api/hmmm/articles.js'
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
// import "quill/dist/quill.core.css";
import 'quill/dist/quill.snow.css'
// import "quill/dist/quill.bubble.css";
export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true
    }
  },
  components: {
    quillEditor
  },
  data () {
    return {
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [
          { trigger: 'blur', message: '文章标题不能为空', required: true }
        ],
        articleBody: [
          { trigger: 'blur', message: '文章内容不能为空', required: true }
        ],
        videoURL: [{ trigger: 'blur', message: '视频地址不能为空' }]
      },
      // 富文本配置选项
      editorOption: {
        modules: {
          // 工具菜单栏配置
          toolbar: [
            [
              'bold', // 加粗
              'italic', // 斜体
              'underline', // 下划线
              'strike', // 删除线
              'blockquote', // 引用
              'code-block', // 代码块
              { list: 'ordered' }, // 有序列表
              { list: 'bullet' }, // 无序列表
              'link', // 链接
              'image' // 图片
            ]
          ]
        },
        placeholder: '请在这里添加产品描述', // 提示
        readyOnly: false, // 是否只读
        theme: 'snow', // 主题 snow/bubble
        syntax: true // 语法检测
      }
    }
  },
  computed: {
    showTitle () {
      return this.formData.id ? '编辑标题' : '新增标题'
    }
  },
  methods: {
    // 编辑
    async updateArticle (row) {
      const { data } = await detail(row)
      this.formData = data
    },
    async btnOk () {
      console.log(this.formData, '781531231231')
      // await this.$refs.AddformData.validate()
      if (this.formData.id) {
        await update(this.formData)
      } else {
        await add(this.formData)
      }

      this.$emit('addArticle')
      this.$emit('update:showDialog', false)
    },
    btnCancel () {
      // 重置数据
      this.formData = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      // 关闭弹层
      this.$emit('update:showDialog', false)
      this.$refs.AddformData.resetFields()
    }
  }
}
</script>

<style>
.ql-editor {
  height: 300px !important;
  width: 300px;
}
.dialog {
  width: 800px;
}
/* 富文本编辑器样式 */
.ql-editor {
  width: 100%;
}
</style>
